import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer, Tooltip } from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
import ProDescriptions from '@ant-design/pro-descriptions';
import type { FormValueType } from './components/UpdateForm';
import UpdateForm from './components/UpdateForm';
import { getArticleMange, getArticleCheck, rule, addRule, updateRule, removeRule } from './service';
import type { TableListItem, TableListPagination } from './data';
import { history, useModel } from 'umi';

const TableList: React.FC = () => {
  /** 新建窗口的弹窗 */
  // state setState class
  // hooks useState
  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
  /** 分布更新窗口的弹窗 */
  //  const [a,setA] = useState<string>('')
  // setA('ssss')
  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const actionRef = useRef<ActionType>();
  const [currentRow, setCurrentRow] = useState<TableListItem>();
  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
  // 文章审核
  const passCheck = async (param: Record<string, any>) => {
    const { code } = await getArticleCheck({ id: param.id, state: 0 });
    code === 1000 ? message.success('该文章审核通过') : message.error('该文章审核失败');
  };
  // 文章审核
  const failCheck = async (param: Record<string, any>) => {
    const { code } = await getArticleCheck({ id: param.id, state: 1 });
    code === 1000 ? message.success('该文章审核失败') : message.error('该文章审核失败');
  };
  //   //审核接口
  // const goArticleColumn = async(value: { column: any; is_delete: number; })=>{
  //   const {code} = await updateArticleColumn({column:value,is_delete:1})
  //   code === 1000 ? message.success('该类型审核成功') : message.error('该类型审核败')
  // }
  /** 国际化配置 */
  // 列的内容
  const columns: ProColumns<TableListItem>[] = [
    {
      title: 'id',
      dataIndex: 'id',
      search: false,
      // tip: '规则名称是唯一的 key',
      render: (dom, entity) => (
        <a
          onClick={() => {
            setCurrentRow(entity);
            setShowDetail(true);
            console.log(dom, entity);
          }}
        >
          {dom}
        </a>
      ),
    },
    {
      title: '文章标题',
      width: '200',
      dataIndex: 'title',
      valueType: 'textarea',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '用户id',
      dataIndex: 'user_id',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '发布日期',
      dataIndex: 'date',
      valueType: 'dateRange',
      width: '300',
      search: false,
      // search: {
      //   transform: (value: any) => ({ dateFrom: value[0], dateTo: value[1] }),
      // },
      render: (dom, record) => <span>{record.date}</span>,
    },
    {
      title: '文章类型',
      dataIndex: 'type',
      valueType: 'textarea',
    },
    {
      title: '审核状态',
      dataIndex: 'check',
      valueType: 'textarea',
      valueEnum: {
        all: { text: '全部', status: 'Default' },
        0: {
          text: '未审核',
          status: 'Error',
        },
        1: {
          text: '审核通过',
          status: 'Success',
        },
        2: {
          text: '审核未通过',
          status: 'Error',
        },
      },
      render: (dom, entity) => (
        <div>
          {entity.check == '0' ? '未审核' : entity.check == '1' ? '审核通过' : '审核未通过'}
        </div>
      ),
    },
    {
      title: '审核人员',
      dataIndex: 'verifier',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '审核日期',
      dataIndex: 'checkdate',
      valueType: 'dateRange',
      search: {
        transform: (value: any) => ({ checkDateFrom: value[0], checkDateTo: value[1] }),
      },
      render: (dom, record) => <span>{record.checkdate}</span>,
    },
    {
      title: '审核失败原因',
      dataIndex: 'reason',
      valueType: 'textarea',
      hideInForm: true,
      search: false,
      render: (text, record) => (
        <Tooltip placement="top" title={record?.reason}>
          {record?.reason?.split(0, 6)}...
        </Tooltip>
      ),
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a
          key="search"
          onClick={() => {
            history.push(`/client/check/detail/${record?.id}`);
          }}
        >
          查看文章
        </a>,
      ],
    },
  ];

  return (
    <PageContainer>
      <ProTable<TableListItem, TableListPagination>
        scroll={{ x: 1800 }}
        headerTitle="文章审核"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => []}
        // 请求列表数据接口
        request={getArticleMange}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => {
            setSelectedRows(selectedRows);
          },
        }}
      />
    </PageContainer>
  );
};

export default TableList;
